<template>
    <div class="waperpage">
        <el-form :model="mianinfo" style="max-width: 800px" label-width="120px">
            <div class="mianblock">

                <el-form-item label="商品标题:">
                    <el-input v-model="mianinfo.name" />
                </el-form-item>
                <el-form-item label="商品描述:">
                    <el-input v-model="mianinfo.desc" type="textarea" />
                </el-form-item>
                <el-form-item label="商品分类:">
                    <el-select v-model="mianinfo.value" placeholder="Select">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="商品主图:">
                    <el-radio-group v-model="mianinfo.resource">
                        <el-radio value="Sponsor">Sponsor</el-radio>
                        <el-radio value="Venue">Venue</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品主图:">
                  <upload/>
                </el-form-item>
            </div>
            <div class="mianblock">
                <el-form-item label="商品属性:" class="skuitem">
                    <el-table :data="mianinfo.skuData" style="width: 100%" max-height="250">
                        <el-table-column  prop="商品SKU" label="商品SKU"  >
                          <template #default="{ row }">
                            <el-input v-model="row.input" style="width: 100%" placeholder="请输入商品SKU" />
                        </template>
                     </el-table-column>
                     <el-table-column  prop="商品售价" label="商品售价" >
                          <template #default="{ row }">
                            <el-input v-model="row.input" style="width: 100%" placeholder="请输入商品售价" />
                        </template>
                     </el-table-column>
                     <el-table-column  prop="date" label="库存" >
                          <template #default="{ row }">
                            <el-input v-model="row.input" style="width: 100%" placeholder="请输入库存" />
                        </template>
                     </el-table-column>
                        <el-table-column label="操作" width="120">
                            <template #default="scope">
                                <el-button link type="danger" size="small" @click.prevent="deleteRow(scope.$index)">
                                    删除属性
                                </el-button>
                               
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="flex-c-c">
                      <el-button    class="addbuttom" @click.prevent="addDomain()">
                                    新增属性
                      </el-button>
                    </div>
                  
                </el-form-item>
            </div>
            <div class="mianblock">
              <el-form-item label="商品详情:">
                <upload/><upload/><upload/>
              </el-form-item>
            </div>
            <div class="mianblock">
                    <div class="flex-c-end">
                      <el-button    class="delbuttom" @click.prevent="addDomain()">
                                    删除
                      </el-button>
                      <el-button    class="addbuttom" @click.prevent="addDomain()">
                                    保存草稿
                      </el-button>
                      <el-button    type="primary" @click.prevent="addDomain()">
                                    上架
                      </el-button>
                    </div>
            </div>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import {
    ref,
    defineEmits,
    onMounted,
    reactive,
    onUnmounted
} from 'vue';

import upload from '@/pages/member/views/mall/components/upload.vue'
// do not use same name with ref
const mianinfo = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    skuData:[{}],
    resource: '',
    desc: '',
})
const options = ref([{
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
])
// 定义 emits
const emits = defineEmits(['update:message']);

// 定义响应式数据
const pageTitle = ref('Vue 3 Page');
const message = ref('');

// 定义方法
const updateMessage = () => {
    message.value = 'Updated message';
    emits['update:message'](message.value);
};
//商品SKU操作
const addDomain = () => {
  mianinfo.skuData.push({
    key: Date.now(),
    value: '',
  })
}
const deleteRow=(index:number)=>{
  mianinfo.skuData.splice(index, 1)
  // const index = mianinfo.domains.skuData.indexOf(item)
  // if (index !== -1) {
  //   mianinfo.domains.skuData.splice(index, 1)
  // }
}
// 生命周期钩子
onMounted(() => {
    console.log('Component mounted');
});

onUnmounted(() => {
    console.log('Component unmounted');
});
</script>

<style scoped lang="scss">
.waperpage {
    font-family: Arial, sans-serif;
    text-align: center;

    display: flex;
    min-height: 800px;
    flex-direction: column;
    justify-content: space-between;

    .mianblock {
        margin-top: 20px;
        background-color: #fff;
        border-radius: 8px;
        padding: 28px 20px;
    }

    .mianblock:first-child {
        margin-top: 0px;
    }
    .skuitem{
      justify-content: flex-start;
      align-items: stretch; 
        :deep(.el-form-item__label) {
          align-self: stretch;
          height: auto !important;  
          display: flex;
          align-items: center; 
          color: #333;

        }
        :deep {
            .el-form-item__label {
              align-self: stretch;
              height: auto !important;
            }
          }  
    }
    .addbuttom{
      color: #3AACE3;
    }
    .delbuttom{
      color: #E47470;
    }
}
.flex-c-c{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-c-end{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  button{
    min-width: 100px;
  }
}
</style>
